---
{
	"title": "Data Ajax",
	"language": "en",
	"category": "Plugins",
	"description": "A basic AjaxLoader wrapper that inserts AJAXed-in content.",
	"tag": "data-ajax",
	"parentdir": "data-ajax",
	"altLangPrefix": "data-ajax",
	"css": ["demo/data-ajax"],
	"dateModified": "2015-03-09"
}
---
<p>A basic AjaxLoader wrapper that inserts AJAXed in content.</p>

<section class="wb-prettify all-pre">
	<h2>Insert content after an element (<code>data-ajax-after</code>)</h2>
	<section>
		<h3>Example</h3>
		<section data-ajax-after="ajax/data-ajax-extra-en.html" class="original">
			<h4>Hello World</h4>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</section>
		<section data-ajax-after="ajax/data-ajax-extra-2-en.html" class="original">
			<h4>Hello World - Part 2</h4>
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		</section>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;section data-ajax-after="ajax/data-ajax-extra-en.html" class="original"&gt;
	&lt;h4&gt;Hello World&lt;/h4&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/section&gt;
&lt;section data-ajax-after="ajax/data-ajax-extra-2-en.html" class="original"&gt;
	&lt;h4&gt;Hello World - Part 2&lt;/h4&gt;
	&lt;p&gt;Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in - Part 2&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Append content to an element (<code>data-ajax-append</code>)</h2>
	<section>
		<h3>Example</h3>
		<div data-ajax-append="ajax/data-ajax-extra-en.html" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
		<div data-ajax-append="ajax/data-ajax-extra-2-en.html" class="original">
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		</div>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-extra-en.html" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;
&lt;div data-ajax-append="ajax/data-ajax-extra-2-en.html" class="original"&gt;
	&lt;p&gt;Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in - Part 2&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Insert content before an element (<code>data-ajax-before</code>)</h2>
	<section>
		<h3>Example</h3>
		<section data-ajax-before="ajax/data-ajax-extra-en.html" class="original">
			<h4>Hello World</h4>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</section>
		<section data-ajax-before="ajax/data-ajax-extra-2-en.html" class="original">
			<h4>Hello World - Part 2</h4>
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		</section>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;section data-ajax-before="ajax/data-ajax-extra-en.html" class="original"&gt;
	&lt;h4&gt;Hello World&lt;/h4&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/section&gt;
&lt;section data-ajax-before="ajax/data-ajax-extra-2-en.html" class="original"&gt;
	&lt;h4&gt;Hello World - Part 2&lt;/h4&gt;
	&lt;p&gt;Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in - Part 2&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Prepend content to an element (<code>data-ajax-prepend</code>)</h2>
	<section>
		<h3>Example</h3>
		<div data-ajax-prepend="ajax/data-ajax-extra-en.html" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
		<div data-ajax-prepend="ajax/data-ajax-extra-2-en.html" class="original">
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		</div>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-ajax-prepend="ajax/data-ajax-extra-en.html" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;
&lt;div data-ajax-prepend="ajax/data-ajax-extra-2-en.html" class="original"&gt;
	&lt;p&gt;Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in - Part 2&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Replaces an element (<code>data-ajax-replace</code>)</h2>
	<section>
		<h3>Example</h3>
		<div data-ajax-replace="ajax/data-ajax-extra-en.html" class="original">
			<section>
				<h4>Hello World</h4>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
			</section>
		</div>
		<div data-ajax-replace="ajax/data-ajax-extra-2-en.html" class="original">
			<section>
				<h4>Hello World - Part 2</h4>
				<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
			</section>
		</div>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-extra-en.html" class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Hello World&lt;/h4&gt;
		&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;
&lt;div data-ajax-replace="ajax/data-ajax-extra-2-en.html" class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Hello World - Part 2&lt;/h4&gt;
		&lt;p&gt;Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-en.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in - Part 2&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Filtering the content by the URL hash (<code>ajax/data-ajax-filter-en.html#filter-id</code>, v4.0.12+)</h2>
	<section>
		<h3>Example</h3>
		<div data-ajax-append="ajax/data-ajax-filter-en.html#filter-id" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-filter-en.html#filter-id" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-filter-en.html</h4>
				<pre><code>&lt;section id="filter-id" class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in and filtered by the URL hash&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;ajaxed-in filter-selector&quot;&gt;
	&lt;h4&gt;I was ajaxed in and filtered by a selector&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;
</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Filtering the content by a selector (<code>ajax/data-ajax-filter-en.html .filter-selector</code>, v4.0.12+)</h2>
	<section>
		<h3>Example</h3>
		<div data-ajax-append="ajax/data-ajax-filter-en.html .filter-selector" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
		<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-filter-en.html .filter-selector" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-filter-en.html</h4>
				<pre><code>&lt;section id="filter-id" class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in and filtered by the URL hash&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
	&lt;h4&gt;I was ajaxed in and filtered by a selector&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;!-- to illustrate filter out -->
&lt;ul class="filter-out-selector">
	&lt;li>Item 1&lt;/li>
	&lt;li>Item 2&lt;/li>
	&lt;li>Item 3&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/section&gt;
</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Filtering out the content by a selector </h2>
	<section>
		<h3>Removing one element</h3>
		<p>Data ajax attribute: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"</code></p>
		<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
	</section>
	<section>
		<h3>Removing multiple elements</h3>
		<p>Data ajax attribute: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)</code></p>
		<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)" class="original">
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</div>
	</section>
	<section>
		<h3>Removing an element and encoding the output</h3>
		<p>Data ajax attribute: <code>data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'</code></p>
		<pre><code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</code></pre>
	</section>
	<section>
		<h3>Source code</h3>
		<details>
			<summary>View code</summary>
			<p>Filtering out one element, in-page HTML</p>
			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector)</strong>" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			<p>Filtering out multiple elements, in-page HTML</p>
			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector, p)</strong>" class="original"&gt;
	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			<p>Filtering out one element and encoding the output</p>
			<pre><code>&lt;pre>&lt;code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/code>&lt;/pre></code></pre>
			<p>data-ajax-filter-en.html</p>
			<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;I was ajaxed in and filtered by the URL hash&lt;/h4&gt;
	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
&lt;h4&gt;I was ajaxed in and filtered by a selector&lt;/h4&gt;
&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
&lt;!-- to illustrate filter out -->
&lt;ul class="filter-out-selector">
	&lt;li>Item 1&lt;/li>
	&lt;li>Item 2&lt;/li>
	&lt;li>Item 3&lt;/li>
&lt;/ul>
&lt;/div&gt;&lt;/section></code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Alternative syntax</h2>
	<p>Consult the <a href="../../docs/ref/data-ajax/data-ajax-en.html">documentation</a> for more information regarding the following alternative syntax.</p>
	<h3>Example</h3>
	<div data-wb-ajax='{
			"url": "ajax/data-ajax-extra-en.html",
			"type": "append"
		}' class="original">
		<section>
			<h4>Hello World</h4>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</section>
	</div>
	<details>
			<summary>View code</summary>
			<section>
				<h4>In-page HTML</h4>
				<pre><code>&lt;div data-wb-ajax='{
		"url": "ajax/data-ajax-extra-en.html",
		"type": "append"
	}' class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Hello World&lt;/h4&gt;
		&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-en.html</h4>
				<pre id="encodeme"><code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-extra-en.html", "type": "replace" }'></code></pre>

				<h5>Source code of this code sample</h5>
				<p>It demo the use of the configuration <code>encode</code></p>
				<pre><code data-wb-ajax='{ "encode": true, "url": "data-ajax-en.html #encodeme", "type": "replace" }'></code></pre>
			</section>
		</details>
</section>

<section>
	<h2>Conditional filtering using HTTP Referrer</h2>
	<p>AJAX-in content on the condition that the HTTP Referrer matches the <code>httpref</code> value. Use regular expression to refine your HTTP referrer to a broader range of pages.</p>
	<p>To be used for promotional content that is not pertinent to task completion. If you have multiple httpref, see documentation for advanced usage.</p>
	<h3>Example</h3>
	<div data-wb-ajax='{
					"url": "ajax/httpref.html#enlang",
					"type": "replace",
					"httpref": "data-ajax-fr.html"
					}'>
		<p>This content will be replaced if you browse to this page from the <a href="data-ajax-fr.html">French version of this page</a></p>
	</div>
		<details>
			<summary>View code</summary>
<pre><code>
&lt;div data-wb-ajax='{
				"url": "ajax/httpref.html#enlang",
				"type": "replace",
				"httpref": "data-ajax-fr.html"
				}'&gt;
	&lt;p&gt;This content will be replaced if you browse to this page from the &lt;a href="../data-ajax-en.html"&gt;French version of this page&lt;/a&gt; page&lt;/p&gt;
&lt;/div&gt;</code></pre>
		</details>
</section>

<section>
	<h2>Code sample</h2>
	<p>AJAX-in any type of code for a code sample</p>
	<pre><code data-wb-ajax='{
		"url": "ajax/data-ajax-template-en.html",
		"type": "replace",
		"encode": true
	}'></code></pre>
	<details>
		<summary>View code</summary>
		<pre><code>&lt;pre>&lt;code data-wb-ajax='{
		"url": "ajax/data-ajax-template-en.html",
		"type": "replace",
		"encode": true
	}'>&lt;/code>&lt;/pre></code></pre>
	</details>
</section>
